import { lazy } from "react";
import { createBrowserRouter } from 'react-router-dom'
import {
    MenuFoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';

const App = lazy(() => import('../App'))
const Home = lazy(() => import('../pages/home/Index'))
const Table = lazy(() => import('../pages/table/Index'))
const User = lazy(() => import('../pages/user/Index'))
const Mess = lazy(() => import('../pages/mess/Index'))
const Detail = lazy(() => import('../pages/detail/Index'))
const Login = lazy(() => import('../pages/login/Index'))
const Youdao = lazy(() => import('../pages/youdao/Index'))
const Pai = lazy(() => import('../pages/pai/Index'))

type homeRouter = {
    path: string;
    element: JSX.Element;
    children?: homeRouter;
    icon?: any;
    label?: string;
}[]

export const homeRoutes: homeRouter = [

]

const allRouter: any = {
    home: {
        path: '/home',
        element: <Home></Home>,
        icon: <MenuFoldOutlined />,
        label: "首页"
    },
    table: {
        path: '/table',
        element: <Table></Table>,
        icon: <UploadOutlined />,
        label: "表格"
    },
    mess: {
        path: '/mess',
        element: <Mess></Mess>,

        icon: <VideoCameraOutlined />,
        label: "消息"
    },
    user: {
        path: '/user',
        element: <User></User>,
        icon: <UserOutlined />,
        label: "用户"
    },
    youdao: {
        path: '/youdao',
        element: <Youdao></Youdao>,
        icon: <UserOutlined />,
        label: "有道翻译"
    },
    pai: {
        path: '/pai',
        element: <Pai></Pai>,
        icon: <UserOutlined />,
        label: "排序"
    },
}

const role = {
    admin: {
        myRouter: ['home', 'table', 'mess', 'user', 'youdao', 'pai']
    },
    user: {
        myRouter: ['home', 'user', 'pai','table']
    }
}

const { myRouter } = role[localStorage.getItem('role') === '2' ? 'admin' : "user"]
myRouter.forEach((item) => {
    homeRoutes.push(allRouter[item])
})

const routes: homeRouter = [
    {
        path: '/',
        element: <App></App>,
        children: homeRoutes
    },
    {
        path: '/login',
        element: <Login></Login>,
    },
    {
        path: '/detail/:id',
        element: <Detail></Detail>,
    },
]

const router = createBrowserRouter(routes)

export default router